/* 用于列表的筛选项，目前只有单选 */
<template>
	<van-dropdown-menu class="filter-wrap">
		<van-dropdown-item 
			v-for="(drop, index) in options"
			:key="index"
			v-model="value[index]"  
			:title="drop.title"
			:options="drop.list" 
			@change="sort(index, value[index])"
		>
			<slot :name="'drop' + index"/>
		</van-dropdown-item>
	</van-dropdown-menu>
</template>
<script>
	import {
		DropdownMenu,
		DropdownItem 
		} from 'vant';
	export default {
		name: 'filter-wrap',
		data () {
			return{
				value: [],
			}
		},
		props: ['options', 'type'],
		components: {
			[DropdownMenu.name]: DropdownMenu,
			[DropdownItem.name]: DropdownItem,
		},
		watch: {
			type: {
				handler (newo, ol) {
					this.value = []
				},
				deep: true
			}
		},
		methods: {
			sort(index, value) {
				this.options[index].list.filter(item => {
					if(item.value == value) this.options[index].title = item.text
				})
				this.$emit('change', {
					value: value,
					type: this.options[index].type,
					index: index,
				})
			}
		}
	}
</script>
<style lang="less" scoped>
 @import "~@style_m/basic/utils/index";
.filter-wrap{
	padding-top:5px;
	position: relative;
	&::before{
		content: ' ';
		top: -50%;
		right: -50%;
		bottom: -50%;
		left: -50%;
		position: absolute;
		box-sizing: border-box;
		pointer-events: none;
		border-bottom:1px solid @border-color;
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
	}
}
/deep/ .van-dropdown-menu__title::after {
	transition: transform ease .3s;
}
</style>